//InnerAudioContext实例
var audioCxt;
//动画
var audioAnimation;
audioCxt = wx.createInnerAudioContext();
audioCxt.src = 'https://zhimi-lake.oss-cn-beijing.aliyuncs.com/audio/lanseduonaohe_230.mp3';
 
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    audioAnimation : null,
    //音乐是不是开始
    music_on : true,
    //音乐是不是在播放
    music_playing :false,
    //显示的时间
    musicTime : '00:00',
    sliderValue : 0,
    leifengta_rotate:0,
    changzhen_rotate:0,
    leifengta_animation:'',
    mypercent:0,
    mytime:0,
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    //音乐播放结束触发
    audioCxt.onEnded((res) =>{
      //修改属性。去除css状态
      this.data.music_on = false;
      this.setData({
        music_on: this.data.music_on
      })
      //重新播放
      audioCxt.seek(0);
      this.setData({
        musicTime: '00:00',
        sliderValue: 0,
        mypercent:0,
        changzhen_rotate:0,
        mytime:0,
      })
    }),
    //在播放状态，绑定播放进度更新事件。然后控制进度条和时间显示
    audioCxt.onPlay((res) =>{ 
      audioCxt.onTimeUpdate(this.timeUpdate)
    })
    audioCxt.onEnded((res)=>{
      console.log('播放end')
    })
  },
 
  //播放按钮事件
  playMusic : function(){
    console.log('播放ing')
    this.data.music_on = true; 
    this.data.music_playing = true;
    audioCxt.play();
    //图片添加css样式，旋转样式
    this.setData({
      music_on: this.data.music_on,
      music_playing: this.data.music_playing
    })
  },
 
  //暂停按钮事件
  pauseMusic : function(){
    this.data.music_on = true;
    this.data.music_playing = false;
    audioCxt.pause();
    this.setData({
      music_on: this.data.music_on,
      music_playing: this.data.music_playing
    })
  },
 
  //停止按钮事件
  stopMusic : function(){
    audioCxt.stop();
    this.data.music_on = false;
    this.setData({
      music_on: this.data.music_on,
      mypercent:0,
      changzhen_rotate:0,
      leifengta_rotate:0,
      mytime:0,
    })
    //重新播放
    audioCxt.seek(0);
    this.setData({
      musicTime: '00:00',
      sliderValue: 0,
      mypercent:0,
      changzhen_rotate:0,
    })
  },
 
  //进度条改变后触发事件
  audioChange : function(e){
    //this.pauseMusic();
    var length = audioCxt.duration;
    console.log('audioChange length==='+length);
    var percent = e.detail.value;
    //用进度条百分比 *　整个音乐长度
    var musicTime = Math.round(length/100*percent);
    console.log('audioChange musicTime==='+musicTime)
    audioCxt.seek(musicTime);
    //this.playMusic();
    //audioCxt.play();
    //因为在拖动进度条时，去除了时间绑定，所以进度改变后重新绑定
    audioCxt.onTimeUpdate(this.timeUpdate);
    console.log('audioChanged percent==='+percent);
    if(this.data.mypercent != percent){
      this.leifent_rotate_click_left(percent,1);
      console.log('audioChanged percent2==='+percent);
    }
    // var time = audioCxt.currentTime;
    // var time2 = parseInt(time);
    // if(time2 - this.data.mytime==1){
    //   this.leifent_rotate_click_left(0,1);
    //   //this.data.mypercent++;
    //   console.log('audioChange mypercent==='+this.data.mypercent + ' mytime=='+this.data.mytime);
    //   this.data.mytime = time2;
    // }
    this.setData({
      musicTime: this.musicTimeFormat(musicTime),
      mypercent:percent,
    })
    //this.playMusic();
    
  },
  //进度条拖动过程中触发事件
  audioChanging : function(e){
    //因为在进度条拖动的时候，还会在timeUpdate里面修改进度条的value，倒置拖动受影响，所以当拖动的时候需要取消绑定
    audioCxt.offTimeUpdate();
 
    //拖动时修改时间显示
    var length = audioCxt.duration;
    var percent = e.detail.value;
    
    console.log('audioChanging percent==='+percent+' mypercent=='+this.data.mypercent);
    if(this.data.mypercent != percent){
      this.leifent_rotate_click_left(percent,1);
      console.log('audioChanging percent2==='+percent);
    }
    var musicTime = Math.round(length / 100 * percent);
    
    // var time = audioCxt.currentTime;
    // var time2 = parseInt(time);
    // if(time2 - this.data.mytime==1){
    //   this.leifent_rotate_click_left(0,1);
    //   //this.data.mypercent++;
    //   console.log('audioChanging mypercent==='+this.data.mypercent + ' mytime=='+this.data.mytime);
    //   this.data.mytime = time2;
    // }

    this.setData({
      musicTime: this.musicTimeFormat(musicTime),
      mypercent:percent,
    })
  },
 
  //将秒钟转化为mm：ss的时间格式
  musicTimeFormat : function(time){
    var second = Math.floor(time % 60);
    if(second<10){
      second = '0' + second;
    }
    var minute = Math.floor(time / 60);
    if (minute < 10) {
      minute = '0' + minute;
    }
    return minute + ':' + second;
  },
 
  //播放的时候，更新进度条和时间显示
  timeUpdate : function(){
    var time = audioCxt.currentTime;
    var time2 = parseInt(time);
    var percent = Math.round(time / audioCxt.duration * 100);
    //var percent = Math.round(time / audioCxt.duration * 36);
    console.log('percent==='+percent +' time=='+time +' audioCxt.duration=='+audioCxt.duration);
    // if(this.data.mypercent != percent){
    //   this.leifent_rotate_click_left(0,0);
    //   console.log('percent2==='+percent);
    // }

    if(time2 - this.data.mytime==1){
      this.leifent_rotate_click_left(0,0);
      //this.data.mypercent++;
      console.log('mypercent==='+this.data.mypercent + ' mytime=='+this.data.mytime);
      this.data.mytime = time2;
    }
    
    this.setData({
      musicTime: this.musicTimeFormat(time),
      sliderValue: percent,
      mypercent:percent,//percent
    })
    
  },
  leifent_rotate_click_left: function(per,isload) {
    var that = this
       //canOnePointMove = false;
       //console.log(e.currentTarget)
       //var top = 0,stop = 0;
      //  const query = this.createSelectorQuery()
      //  query.select('#leifengta').boundingClientRect()
      //  query.selectViewport().scrollOffset()
      //  query.exec(function (res) {
      //    //console.log(res)
      //    var top = 0,stop = 0,left=0,rotate=that.data.leifengta_rotate+3.6;
      //    //rotate = rotate*per;
      //    console.log('rotate==='+rotate);
      //    top = res[0].top // #the-id节点的上边界坐标
      //    left = res[0].left
      //    stop = res[1].scrollTop // 显示区域的竖直滚动位置
      //    that.setData({
      //      msg: '旋转1  top='+top + ' left='+left,
      //      leifengta_top:top,
      //      leifengta_left:left,
      //      leifengta_rotate:rotate,
      //    })
      //    console.log('旋转1  top='+top + ' left='+left);
      //  })
      //var rotate=that.data.leifengta_rotate+10.8;
      var rotate=that.data.leifengta_rotate+6;//360*4圈/100=14.4
      var rotate2 = that.data.changzhen_rotate+0.1;//0.3
      if(isload==1){
        rotate = 6*per;
        rotate2 = 0.3*per;
      }
 
      
         console.log('rotate==='+rotate);

         that.setData({
           leifengta_rotate:rotate,
           changzhen_rotate:rotate2,
         })
         //console.log('旋转1  top='+top + ' left='+left);
       //this.data.leifengta_rotate++;
       //that.rotateAni(++this.data.leifengta_rotate);
    },
      /**
 * 实现image旋转动画，每次旋转 45*n度
 */

})